<?php require 'content/walls.php' ?>

<script type="text/javascript">
    $(function() {
        $("#horizontalMenuMur").tabs();
    });
   
    $(function(){
        $('#verticalMenu').tabs({
            select: function(event,ui) {
                alert('Hello');
                $("#horizontalMenuMur *").removeClass("cacher");
                
                var value=$('input[name=shape]:checked', '#gen').val();
     
                //Square
                if (value == 1) {
                    for (i=5; i<=6; i++){
                        $("#horizontalMenuMur #li_mur_"+i).addClass("cacher");
                    }
                    
                    $('#l1').attr('src', '../images/subMenu/wall/square/square1.png');
                    $('#l2').attr('src', '../images/subMenu/wall/square/square2.png');
                    $('#l3').attr('src', '../images/subMenu/wall/square/square3.png');
                    $('#l4').attr('src', '../images/subMenu/wall/square/square4.png');
                    $('#l5').attr('src', '');
                    $('#l6').attr('src', '');
                }
                //Rectangle
                if(value == 2){
                    for (i=5; i<=6; i++){
                        $("#horizontalMenuMur #li_mur_"+i).addClass("cacher");
                    }
                    
                    $('#l1').attr('src', '../images/subMenu/wall/rectangle/rect1.png');
                    $('#l2').attr('src', '../images/subMenu/wall/rectangle/rect2.png');
                    $('#l3').attr('src', '../images/subMenu/wall/rectangle/rect3.png');
                    $('#l4').attr('src', '../images/subMenu/wall/rectangle/rect4.png');
                    $('#l5').attr('src', '');
                    $('#l6').attr('src', '');
                }
                //Shape L
                if(value == 3){
                    for (i=7; i<=6; i++){
                        $("#horizontalMenuMur #li_mur_"+i).addClass("cacher");
                    }
                    
                    $('#l1').attr('src', '../images/subMenu/wall/l/l1.png');
                    $('#l2').attr('src', '../images/subMenu/wall/l/l2.png');
                    $('#l3').attr('src', '../images/subMenu/wall/l/l3.png');
                    $('#l4').attr('src', '../images/subMenu/wall/l/l4.png');
                    $('#l5').attr('src', '../images/subMenu/wall/l/l5.png');
                    $('#l6').attr('src', '../images/subMenu/wall/l/l6.png');
                }
                //Shape U
                if(value == 4){
                    for (i=5; i<=6; i++){
                        $("#horizontalMenuMur #li_mur_"+i).addClass("cacher");
                    }
                    
                    $('#l1').attr('src', '../images/subMenu/wall/u/uD1D2.png');
                    $('#l2').attr('src', '../images/subMenu/wall/u/uD3D4.png');
                    $('#l3').attr('src', '../images/subMenu/wall/u/uD5D6.png');
                    $('#l4').attr('src', '../images/subMenu/wall/u/uD7D8.png');
                    $('#l5').attr('src', '');
                    $('#l6').attr('src', '');
                }
                //Shape Z
                if(value == 5){
                    for (i=5; i<=6; i++){
                        $("#horizontalMenuMur #li_mur_"+i).addClass("cacher");
                    }
                    
                    $('#l1').attr('src', '../images/subMenu/wall/rectangle/rect1.png');
                    $('#l2').attr('src', '../images/subMenu/wall/rectangle/rect2.png');
                    $('#l3').attr('src', '../images/subMenu/wall/rectangle/rect3.png');
                    $('#l4').attr('src', '../images/subMenu/wall/rectangle/rect4.png');
                    $('#l5').attr('src', '');
                    $('#l6').attr('src', '');
                }
                //Shape T
                if(value == 6){
                    for (i=5; i<=6; i++){
                        $("#horizontalMenuMur #li_mur_"+i).addClass("cacher");
                    }
                    
                    $('#l1').attr('src', '../images/subMenu/wall/t/tF1F2.png');
                    $('#l2').attr('src', '../images/subMenu/wall/t/tF3F4.png');
                    $('#l3').attr('src', '../images/subMenu/wall/t/tF5F6.png');
                    $('#l4').attr('src', '../images/subMenu/wall/t/tF7F8.png');
                    $('#l5').attr('src', '');
                    $('#l6').attr('src', '');
                }
            }
        });
    });
</script>

<form style="margin: 0;padding:0 " id="formMur" onsubmit="return LiveValidation.massValidate();" method="POST" >
    <div id="walls" class="demo">
        <div id="horizontalMenuMur" >
            <?php
            for ($i = 1; $i < 7; $i++) {
                echo '
            <div id="tabsmur-' . $i . '"><p id="subtitle">' . TXT_WALL . ' ' . $i . '
                </p>';
                CreateWalls($i);
                echo '
            </div>                
';
            }
            ?>
            <ul>
                <li id="li_mur_1"><a href="#tabsmur-1"><img class="horizontalMenu" id="l1" src="../images/subMenu/wall/square/square1.png" alt="Mur 1" /></a></li>
                <li id="li_mur_2"><a href="#tabsmur-2"><img class="horizontalMenu" id="l2" src="../images/subMenu/wall/square/square2.png" alt="Mur 2" /></a></li>
                <li id="li_mur_3"><a href="#tabsmur-3"><img class="horizontalMenu" id="l3" src="../images/subMenu/wall/square/square3.png" alt="Mur 3" /></a></li>
                <li id="li_mur_4"><a href="#tabsmur-4"><img class="horizontalMenu" id="l4" src="../images/subMenu/wall/square/square4.png" alt="Mur 4" /></a></li>
                <li id="li_mur_5"><a href="#tabsmur-5"><img class="horizontalMenu" id="l5" src="" alt="Mur 5" /></a></li>
                <li id="li_mur_6"><a href="#tabsmur-6"><img class="horizontalMenu" id="l6" src="" alt="Mur 6" /></a></li>
            </ul>
        </div>
    </div>
</form>

<script>
    function changeMode(){
       
        //   $("#walls").load("wallsHorizontalMenuExpert.php");
    }
</script>